<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../CSS/reset.css">
    <link rel="stylesheet" href="./index.css">
    <style>
        /* 浏览器的默认样式
            - 黑框框的左边与浏览器边边有一个距离；这个距离不是黑框div,那么是黑框框div父元素的，即body元素；
            - p段落上下之间也有空行；
        */
        .box-m {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

        body,
        p,
        ul {
            margin: 0;
        }

        ul {
            padding: 0;
            /* 黑色小点回来了 */
            margin-left: 20px;
            /* 去除小黑点，去除项目符号 */
            list-style: none;
        }

        /* 去除所有的样式 */
        * {
            margin: 0;
            padding: 0;
        }




        /* 行内元素的盒模型
            - 不能设置宽高；
            - 行内元素可以设置padding,margin,border,垂直方向的padding,m,b不影响页面的垂直布局；
            */

        /* 
             display: none; 没了就真的没了；block,inline；（快转行，行砖块）inline-block;（既可以改宽高，又不独占一行）
             visibility: hidden; 隐藏，位置还在；
             
             */
        .s1 {
            background-color: yellow;
            padding: 10px;
            border: 10px solid black;
            margin: 10px;
            /* display: none; */
            visibility: hidden;
        }

        .box1-s1 {
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
        }


        /* 外边距的折叠
            只有垂直方向上两个邻近的元素会发生外边距的折叠；
            - 垂直的兄弟元素发生外边距折叠 margin-bottom, margin-top
                - margin-bottom ,margin-top 都为正，取最大；一正一负得相加；都为负，取绝对值最大的；
            - 父子元素发生外边距重叠
             - padding-top: 100px;不用外边距法：给父元素设置 上-内边距，再减去多余的高度；
        */
        /* 兄弟选择器用，分开 */
        .box1-z,
        .box2-z {
            width: 200px;
            height: 200px;
        }

        .box1-z {
            background-color: #bfa;
            margin-bottom: 100px;
        }

        .box2-z {
            background-color: orange;
            margin-top: -30px;
            margin-bottom: 100px;
        }

        /* 父子元素的折叠
        不用外边距法
        */
        /* .box3-z {
            width: 200px;
            height: 100px;
            background-color: #bfa;
            padding-top: 100px;

        } */

        /* 用外边距法 给父元素加边框（但需要改各种高度），这样父元素的外边距和子元素的外边距就不一样了 */
        .box3-z {
            width: 200px;
            height: 199px;
            background-color: #bfa;
            border-top: 1px solid #bfa;


        }

        /*  描述清楚现象，然后提出问题；
            设置子元素 margin-top: 50px; 子元素和父元素一起向下挪动；
            因为 子元素和父元素的外边距是一样的，都是上面的那条线；所以才会一起移动；
        */
        .box4-z {
            width: 100px;
            height: 100px;
            background-color: orange;
            margin-top: 99px;
            /* padding: 1px; */
            /* margin-left: 50px; */
            /* margin-bottom: 50px; */
            /* margin-right: 50px; */
        }




        /* 垂直方向的布局 默认情况下父元素的高度是被内容撑开的；垂直不满足水平的等式  
        - 父元素高度不写---父元素的高度被内容撑开；
        - 父元素高度写了，那是多少就是多少；

  
        */
        .outer2 {
            background-color: #bfa;

        }

        .inner2 {
            width: 100px;
            height: 200px;
            background-color: orange;
            margin-bottom: 200px;
        }

        /*
         - 溢出 元素里面的子元素会把父元素撑开，造成了溢出（内容溢出了一个元素的边框，所以溢出是在父元素上的）
            - 解决溢出，父元素有overflow属性
            - overflow取值
                - visible; 会呈现在元素框之外，会溢出现象，默认值；
                - hidden；把溢出的隐藏；但是如果隐藏的是文字的话，这个值不适合；
                - scroll; 横轴和纵轴出现滚动条；但有时候横轴不需要滚动条；
                - auto;  自动出现滚动条；在需要的时候出现滚动条，不需要的时候不出现滚动条；
        
        */
        .box1-h {
            width: 200px;
            height: 200px;
            background-color: yellow;
            margin-bottom: 500px;
            overflow: scroll;

        }

        .box2-h {
            width: 100px;
            height: 300px;
            background-color: yellowgreen;
        }





        /* 
        元素在其父元素水平方向的位置由以下几个属性共同决定：
        margin-left + border-left + padding-left + width + padding-right+border-right + margin-right = 父元素内容宽度；
                0 + 0 + 0 + 100+ 0 + 0 + 0 = 800 等式不成立，
            - （若这7个值没有auto的情况）
                - 则浏览器会调整margin-right的值，此时margin-right:700px; 如果你写margin-right:300px;并没有用(过渡约束，浏览器会自动调整)；因为300px 等式也不成立；
            - 若有auto
                - 这7个值中有三个可以设置为auto
                 - width (默认为auto)
                 - margin-left
                 - margin-right
                  - 若width,margin-left 或者 width, margin-right 或者 3个都为auto 则这三组是width达到最大值；
                  - 通常用 width:300px; margin:0 auto; 实现内部元素水平居中；
                  - 若子元素超出父元素大小，则会溢出父元素，此时浏览器将margin-right:-200px;
        */
        .outer {
            width: 800px;
            height: 200px;
            /* background-color: #fba; */
            border: 2px solid black;
            margin-bottom: 100px;
        }

        .inner {
            width: 1000px;
            margin: 0px auto;
            /* margin-left: auto;
            margin-right: auto; */
            height: 200px;
            background-color: #fba;
            /* margin-right: 400px; */
        }






        .box1 {
            /* 这里的w h 设置的是content的宽高； */
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /* 边框的大小会影响整个盒子的大小；边框的里面属于盒子的里面，边框的外面属于盒子的位置； */
            border: 3px solid black;
            padding: 10px;
            /* margin: 100px; */
            /* margin的left和top是移动自己的。 margin的right 和 bottom是挤别人的； */
            margin-bottom: 100px;
            /* margin设置负值时，是往相反方向走；mt +下，-上；ml +右 -左； */
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: orange;
            border: 2px solid black;
            margin-bottom: -100px;
        }

        .box3 {
            width: 200px;
            height: 200px;
            background-color: rgb(176, 124, 124);
            border: 2px solid black;
        }
    </style>
</head>

<body>
    <h1>浏览器的默认样式</h1>
    <div class="box-m"></div>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <p>我是一个段落</p>
    <ul>
        <li>1</li>
        <li>3</li>
        <li>4</li>
    </ul>


    <h1>行内元素的盒模型</h1>
    <span class="s1">我是span</span>
    <span class="s1">我是span</span>
    <span class="s1">我是span</span>
    <div class="box1-s1 "></div>

    <h1>外边距的折叠</h1>
    <div class="box1-z"></div>
    <div class="box2-z"></div>
    <h3>父子元素的折叠</h3>
    <div class="box3-z">
        <div class="box4-z"></div>
    </div>

    <h1>盒子模型 垂直方向的布局</h1>
    <div class="outer2">
        <div class="inner2"></div>
        <div class="inner2"></div>
    </div>

    <div class="box1-h">
        <div class="box2-h"></div>
    </div>


    <h1>layout 盒子模型 水平方向的布局</h1>
    <div class="outer">
        <div class="inner"></div>
    </div>

    <div class="box1">aaaa</div>
    <div class="box2">bbbb</div>
    <div class="box3">cccc</div>




</body>

</html>